<template>
  <div style="height:100%;background:#f9f9f9;overflow:auto;">
    <div style="width:1200px;margin:0 auto;background:#fff;">
      <div class="clear bb ptb10 mb20" style="padding:20px;">
        <div class="fl mr20 bold">{{info.name}}</div>
        <div class="fl mr20 c-999">实时数据</div>
        <div class="fl mr20">{{time}}</div>
      </div>
      <div
        class="clear"
        style="height:100%;overflow:auto;border-top:10px solid #f9f9f9;padding:0 20px;"
      >
        <div class="fl bgff pt20" style="width:27%;height:100%;">
          <h2 class="bold fz14 p10" style="background:#a0d468;color:#fff;">终端信息</h2>
          <div class="info1 fz14 p10">
            <p class>
              <span>终端名称：</span>
              <em>{{info.name}}</em>
            </p>
            <p class>
              <span>服务状态：</span>
              <em v-if="info.status===0">离线</em>
              <em v-if="info.status===1" style="color:#67b91a;">正常</em>
              <em v-if="info.status===2" style="color:#ef3535;">报警</em>
            </p>
            <p class>
              <span>设备IMEI：</span>
              <em>{{info.imei}}</em>
            </p>
            <p class>
              <span>设备断路器地址：</span>
              <em>{{info.adr}}</em>
            </p>
            <p class>
              <span>安装时间：</span>
              <em v-if="info.createTime">{{new Date(info.createTime).format('yyyy-MM-dd hh:mm:ss')}}</em>
              <em v-else>-</em>
            </p>
          </div>

          <h2 class="bold fz14 p10" style="background:#a0d468;color:#fff;">传感器数据</h2>
          <ul class="info2 fz14 lh1" style="height:calc(100% - 195px);overflow: auto;">
            <li class="clear bb p10">
              <div class="fl">
                <p>A相电流</p>
                <p class="fz12 mt10">{{time}}</p>
              </div>
              <div class="fr mt10">{{current.a_i==='-'?'-':(current.a_i/10).toFixed(1)}} A</div>
            </li>
            <li class="clear bb p10">
              <div class="fl">
                <p>A相电压</p>
                <p class="fz12 mt10">{{time}}</p>
              </div>
              <div class="fr mt10">{{current.a_v==='-'?'-':current.a_v/10}} V</div>
            </li>
            <li class="clear bb p10">
              <div class="fl">
                <p>A相温度</p>
                <p class="fz12 mt10">{{time}}</p>
              </div>
              <div class="fr mt10">{{current.a_t}} ℃</div>
            </li>
            <li class="clear bb p10">
              <div class="fl">
                <p>A相剩余电流</p>
                <p class="fz12 mt10">{{time}}</p>
              </div>
              <div class="fr mt10">{{current.a_di}} mA</div>
            </li>
            <li class="clear bb p10">
              <div class="fl">
                <p>A相瞬时功率</p>
                <p class="fz12 mt10">{{time}}</p>
              </div>
              <div class="fr mt10">{{current.a_pw==='-' ? '-': current.a_pw/10000}} KW</div>
            </li>
            <li class="clear bb p10">
              <div class="fl">
                <p>A相平均功率</p>
                <p class="fz12 mt10">{{time}}</p>
              </div>
              <div class="fr mt10">{{current.a_vw==='-' ? '-': current.a_vw/10000}} KW</div>
            </li>
            <li class="clear bb p10">
              <div class="fl">
                <p>A相电能</p>
                <p class="fz12 mt10">{{time}}</p>
              </div>
              <div class="fr mt10">{{current.a_ww}} kW·h</div>
            </li>
            <li class="clear bb p10">
              <div class="fl">
                <p>A相功率因素</p>
                <p class="fz12 mt10">{{time}}</p>
              </div>
              <div class="fr mt10">{{current.a_ss==='-'?'-':current.a_ss/100}}</div>
            </li>
          </ul>
        </div>
        <div class="fr bgff pt20" style="width:71%;height:100%;border-left:10px solid #f9f9f9;">
          <div id="line1" style="height:400px;width:100%;overflow: hidden;"></div>
          <div id="line2" style="height:400px;width:100%;overflow: hidden;"></div>
          <div id="line3" style="height:400px;width:100%;overflow: hidden;"></div>
          <div id="line4" style="height:400px;width:100%;overflow: hidden;"></div>
          <div id="line5" style="height:400px;width:100%;overflow: hidden;"></div>
          <div id="line6" style="height:400px;width:100%;overflow: hidden;"></div>
          <div id="line7" style="height:400px;width:100%;overflow: hidden;"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { _chartReport, _equipmentShow } from "@/http/ajax";
import conf from "@/http/uploadconfig";
import nprogress from "nprogress";
import "nprogress/nprogress.css";
export default {
  name: "history",
  data() {
    return {
      info: {},
      current: { a_v: "",a_ss:"",a_i:"",a_pw:"",a_vw:""},
      time: "",
      timer: ""
    };
  },
  mounted() {
    this.getEquipment();
  },
  methods: {
    noDdata(op) {
      $("#" + op.dom).css({ height: "300px" }).html(`<div class="bold pl30">
            ${op.name}
          </div>
          <div class="tx-c">
            <img src="${conf.nodata1}" alt="">
          </div>`);
    },
    // 画图
    drawLine(op) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(op.dom));
      let option = {
        title: {
          text: op.name
        },
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: "category",
          data: op.categories
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: op.data,
            type: "line",
            smooth: true
          }
        ]
      };
      myChart.setOption(option);
    },
    /**
     * 处理温度参数
     */
    doI(res) {
      let option = {
          dom: "line1",
          name: `电流趋势变化图（电流预设值警报值 ${
            res.standard ? res.standard.a_i : "-"
          } A）`,
          data: [],
          categories: []
        },
        resdata = res.data;
      if (resdata && resdata.length > 0) {
        resdata.forEach(el => {
          option.categories.push(
            new Date(el.create_time).format("yyyy-MM-dd hh:mm:ss")
          );
          option.data.push((el.a_i/10||0).toFixed(1));
        });
        this.drawLine(option);
      } else {
        this.noDdata(option);
      }
    },
    doT(res) {
      let option = {
          dom: "line2",
          name: `温度趋势变化图（温度预设值警报值 ${res.standard.a_t ||
            "-"} ℃）`,
          data: [],
          categories: []
        },
        resdata = res.data;
      if (resdata && resdata.length > 0) {
        resdata.forEach(el => {
          option.categories.push(
            new Date(el.create_time).format("yyyy-MM-dd hh:mm:ss")
          );
          option.data.push(el.a_t);
        });
        this.drawLine(option);
      } else {
        this.noDdata(option);
      }
    },
    /**
     * 处理剩余电流参数
     */
    doDi(res) {
      let option = {
          dom: "line3",
          name: `剩余电流变化图（剩余电流预设值 ${res.standard.a_di ||
            "-"} mA）`,
          data: [],
          categories: []
        },
        resdata = res.data;
      if (resdata && resdata.length) {
        resdata.forEach(el => {
          option.categories.push(new Date(el.create_time).format("hh:mm:ss"));
          option.data.push(el.a_di);
        });
        this.drawLine(option);
      } else {
        this.noDdata(option);
      }
    },
    /**
     * 处理电压参数
     */
    doV(res) {
      let option = {
          dom: "line4",
          name: `电压趋势变化图（电压预设值警报值 ${res.standard&&res.standard.a_u ? res.standard.a_u/10: "-"} V）`,
          data: [],
          categories: []
        },
        resdata = res.data;
      if (resdata && resdata.length > 0) {
        resdata.forEach(el => {
          option.categories.push(
            new Date(el.create_time).format("yyyy-MM-dd hh:mm:ss")
          );
          option.data.push(el.a_v / 10);
        });
        this.drawLine(option);
      } else {
        this.noDdata(option);
      }
    },
    /**
     * 处理功率参数
     */
    doSS(res) {
      let option = {
          dom: "line5",
          name: `功率因数趋势变化图`,
          data: [],
          categories: []
        },
        resdata = res.data;
      if (resdata && resdata.length) {
        resdata.forEach(el => {
          option.categories.push(new Date(el.create_time).format("hh:mm:ss"));
          option.data.push(el.a_ss/100);
        });
        this.drawLine(option);
      } else {
        this.noDdata(option);
      }
    },
    //瞬时功率
    doPw(res) {
      let option = {
          dom: "line6",
          name: `瞬时功率趋势变化图 （单位 KW）`,
          data: [],
          categories: []
        },
        resdata = res.data;
      if (resdata && resdata.length) {
        resdata.forEach(el => {
          option.categories.push(new Date(el.create_time).format("hh:mm:ss"));
          option.data.push(el.a_pw/10000);
        });
        this.drawLine(option);
      } else {
        this.noDdata(option);
      }
    },
    doWw(res) {
      let option = {
          dom: "line7",
          name: `电能变化图（kW·h）`,
          data: [],
          categories: []
        },
        resdata = res.data;
      if (resdata && resdata.length) {
        resdata.forEach(el => {
          option.categories.push(new Date(el.create_time).format("hh:mm:ss"));
          option.data.push(el.a_ww);
        });
        this.drawLine(option);
      } else {
        this.noDdata(option);
      }
    },
    getData: function(clientid) {
      let data = {
        clientid: clientid,
        startTime: new Date().format("yyyy-MM-dd hh:mm:ss"),
        endTime: new Date().format("yyyy-MM-dd hh:mm:ss")
      };
      this.time = data.startTime;
      _chartReport(
        data,
        res => {
          this.doI(res);
          this.doT(res);
          this.doV(res);
          this.doSS(res);
          this.doDi(res);
          this.doPw(res);
          this.doWw(res);
          nprogress.done();
        },
        err => {
          console.log(err);
        }
      );
    },
    getEquipment() {
      nprogress.start();
      _equipmentShow(
        this.$route.params.id,
        res => {
          this.getData(res.info.imeiTablename);
          this.current = res.current || {
            a_di: "-",
            a_i: "-",
            a_pw: "-",
            a_ss: "-",
            a_t: "-",
            a_v: "-",
            a_vw: "-",
            a_ww: "-",
            b_di: "-",
            b_i: "-",
            b_pw: "-",
            b_ss: "-",
            b_t: "-",
            b_v: "-",
            b_vw: "-",
            b_ww: "-",
            c_di: "-",
            c_i: "-",
            c_pw: "-",
            c_ss: "-",
            c_t: "-",
            c_v: "-",
            c_vw: "-",
            c_ww: "-"
          };
          this.info = res.info;
        },
        err => {
          console.log(err);
        }
      );
      this.timer = setTimeout(() => {
        this.getEquipment();
      }, 10000);
    }
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  }
};
</script>

<style lang="scss">
.bb {
  border-bottom: 1px solid #e5e5e5;
}
#nprogress .bar {
  background: #338ff6 !important; //自定义nprogress颜色
}
.info1 {
  p {
    line-height: 2;
  }
}
</style>
